prosemirror-transform

What is prosemirror-transform?

The prosemirror-transform package is a part of the ProseMirror toolkit, which provides a set of tools for building rich-text editors. This package specifically deals with transforming ProseMirror documents, allowing you to apply changes, manipulate document structure, and handle collaborative editing scenarios.

What are prosemirror-transform's main functionalities?

Applying Steps

This feature allows you to apply a step to a ProseMirror document. Steps are atomic changes that can be applied to a document, such as inserting or deleting content.

const { Step } = require('prosemirror-transform');
const { Schema, DOMParser } = require('prosemirror-model');
const { schema } = require('prosemirror-schema-basic');

let doc = DOMParser.fromSchema(schema).parse(document.querySelector('#content'));
let step = new Step();
let result = step.apply(doc);
console.log(result.doc);

Transformations

This feature allows you to create a transformation and apply multiple changes to a document. Transformations can include inserting, deleting, or replacing content.

const { Transform } = require('prosemirror-transform');
const { Schema, DOMParser } = require('prosemirror-model');
const { schema } = require('prosemirror-schema-basic');

let doc = DOMParser.fromSchema(schema).parse(document.querySelector('#content'));
let tr = new Transform(doc);
tr.insert(1, schema.text('Hello, world!'));
console.log(tr.doc);

Mapping Positions

This feature allows you to map positions in a document, which is useful for collaborative editing where multiple users are making changes simultaneously. The Mapping class helps keep track of position changes.

const { Mapping } = require('prosemirror-transform');

let mapping = new Mapping();
mapping.appendMap({ map: [0, 1, 2, 3] });
let newPos = mapping.map(2);
console.log(newPos);

Other packages similar to prosemirror-transform

slate

Slate is a completely customizable framework for building rich text editors. It provides a set of tools for transforming documents, similar to prosemirror-transform, but with a different API and more focus on React integration.

draft-js

Draft.js is a framework for building rich text editors in React. It offers similar document transformation capabilities but is more tightly integrated with React and provides a different set of abstractions for handling content.

quill

Quill is a powerful, rich text editor that provides a simple API for transforming documents. It is less modular than ProseMirror but offers a more out-of-the-box solution for common rich text editing needs.

README

prosemirror-transform

[ WEBSITE | ISSUES | FORUM | GITTER | CHANGELOG ]

ProseMirror is a well-behaved rich semantic content editor based on contentEditable, with support for collaborative editing and custom document schemas.

This module implements document transforms, which are used by the editor to treat changes as first-class values, which can be saved, shared, and reasoned about.

The project page has more information, a number of examples and the documentation.

This code is released under an MIT license. There's a forum for general discussion and support requests, and the Github bug tracker is the place to report issues.

Changelog

0.23.0 (2017-09-13)

Breaking changes

Step.toJSON no longer has a default implementation.

Steps no longer have an offset method. Map them through a map created with StepMap.offset instead.

The clearMarkup method on Transform is no longer supported (you probably needed clearIncompatible anyway).

Bug fixes

Pasting a list item at the start of a non-empty textblock now wraps the textblock in a list.

Marks on open nodes at the left of a slice are no longer dropped by Transform.replace.

New features

StepMap now has a static method offset, which can be used to create a map that offsets all positions by a given distance.

Transform objects now have a clearIncompatible method that can help make sure a node's content matches another node type.